<template>
  <el-config-provider :locale="$i18n.messages[$i18n.locale].el">
    <router-view v-slot="{ Component }">
      <component :is="Component" />
    </router-view>
  </el-config-provider>
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, provide, readonly } from 'vue'
import { ElConfigProvider } from 'element-plus'
import colorTool from '@/utils/color'
import sysCache from '@/utils/cache'
import projectSetting from '@/settings/projectSetting'
import { useBreakpoints } from '@vueuse/core'

export default defineComponent({
  components: {
    ElConfigProvider
  },
  setup() {
    const breakpoints = useBreakpoints({
      xs: 480,
      sm: 576,
      md: 768,
      lg: 992,
      xl: 1200,
      xxl: 1600
    })
    const isMobile = breakpoints.smaller('lg')
    provide('isMobile', readonly(isMobile))

    onBeforeMount(() => {
      //设置主题颜色
      const app_color =
        sysCache.localCache.getCache('APP_THEMECOLOR') || projectSetting.APP_THEMECOLOR
      if (app_color) {
        document.documentElement.style.setProperty('--el-color-primary', app_color)
        for (let i = 1; i <= 9; i++) {
          document.documentElement.style.setProperty(
            `--el-color-primary-light-${i}`,
            colorTool.lighten(app_color, i / 10)
          )
        }
        document.documentElement.style.setProperty(
          `--el-color-primary-darken-1`,
          colorTool.darken(app_color, 0.1)
        )
      }
    })

    return {}
  }
})
</script>

<style lang="scss">
@import '@/style/index.scss';
@import '@/style/theme/dark.scss';
</style>
